<template>
  <div class="el-color-dropdown">
    <div class="el-color-dropdown__main-wrapper">
      <hue-slider ref="hue" :color="color" vertical style="float: right;"></hue-slider>
      <sv-panel ref="sl" :color="color"></sv-panel>
    </div>
    <alpha-slider v-if="showAlpha" ref="alpha" :color="color" class="mar-top-10 mar-btm-10"></alpha-slider>
    <span class="font-size-14">常用颜色</span>
    <predefine v-if="predefine" :color="color" :colors="predefine"></predefine>
    <span class="font-size-14">主题颜色</span>
    <Theme :color="color" :colors="activeTheme"></Theme>
    <div class="el-color-dropdown__btns">
      <span class="el-color-dropdown__value">
        <el-input v-model="customInput" :validate-event="false" size="mini" @keyup.native.enter="handleConfirm" clearable
                  @blur="handleConfirm">
        </el-input>
      </span>
      <el-button size="mini" type="text" class="el-color-dropdown__link-btn" @click="$emit('clear')">
        {{t('el.colorpicker.clear')}}
      </el-button>
      <el-button plain size="mini" class="el-color-dropdown__btn" @click="confirmValue">
        {{t('el.colorpicker.confirm')}}
      </el-button>
    </div>

  </div>
</template>

<script>
  import SvPanel from './sv-panel';
  import HueSlider from './hue-slider';
  import AlphaSlider from './alpha-slider';
  import Predefine from './predefine';
  import Popper from 'element-ui/src/utils/vue-popper';
  import Locale from 'element-ui/src/mixins/locale';
  import ElInput from 'element-ui/packages/input';
  import ElButton from 'element-ui/packages/button';
  import Theme from './theme.vue';
  import {mapState} from "vuex";

  export default {
    name: 'ElColorPickerDropdown',
    components: {
      SvPanel,
      HueSlider,
      AlphaSlider,
      ElInput,
      ElButton,
      Predefine,
      Theme
    },
    mixins: [Popper, Locale],
    props: {
      // eslint-disable-next-line vue/require-prop-types
      color: {
        required: true
      },
      showAlpha: {
        type: Boolean,
        default: false
      },
      showPanelColor: {
        type: Boolean,
        default: false
      },
      predefine: {
        type: Array,
        default: () => {
          return [];
        }
      },
    },
    data() {
      return {
        customInput: ''
      };
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme
      }),
      currentColor() {
        return !this.value && !this.showPanelColor ? '' : this.color.value;
      }
    },
    watch: {
      showPopper(val) {
        if (val === true) {
          this.$nextTick(() => {
            const {sl, hue, alpha} = this.$refs;
            sl && sl.update();
            hue && hue.update();
            alpha && alpha.update();
          });
        }
      },
      currentColor: {
        immediate: true,
        handler(val) {
          this.customInput = val;

        }
      }
    },
    mounted() {
      this.$parent.popperElm = this.popperElm = this.$el;
      this.referenceElm = this.$parent.$el;
    },
    methods: {
      confirmValue() {
        this.$emit('pick','backgroundColor');
      },
      handleConfirm() {
        this.color.fromString(this.customInput);
      }
    }
  };
</script>

<style scoped lang="less">
  .el-color-picker__panel {
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
  }
</style>
